<script setup>
import { NPopover } from 'naive-ui'
import { NAV_CUSTOMER_CASE_MAP, NAV_MAP_1, NAV_MAP_3, NAV_MAP_4, NAV_MAP_5, NAV_MAP_6, NAV_MAP_7, NAV_RESOURCES_SERVICES_MAP, NAV_SOLUTION_MAP, PRODUCT_ITEM_MAP, ROUTE_MAP } from './const'
import NavStyle1 from './components/NavStyle1/index.vue'
import NavStyle2 from './components/NavStyle2/index.vue'
import NavStyle3 from './components/NavStyle3/index.vue'
import NavStyle4 from './components/NavStyle4/index.vue'
import NavRoomPush from './components/NavRoomPush/index.vue'
import NavResources from './components/NavResources/index.vue'
import { loadBaiduScript } from '@/utils'

const route = useRoute()
const activeMenu = ref()

watch(
  () => route.path,
  val => {
    activeMenu.value = 0
    for (const [key, value] of Object.entries(ROUTE_MAP)) {
      if (val.includes(value)) {
        activeMenu.value = Number(key)
      }
    }
  },
  {
    immediate: true
  }
)

const product = ref(1)

function selectProduct(index) {
  product.value = index
}
const showTop = ref(false)
function scrollTo() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
onMounted(() => {
  window.addEventListener('scroll', () => {
    if (window.scrollY > 800) {
      showTop.value = true
    } else {
      showTop.value = false
    }
  })
})
</script>

<template>
  <header class="bg-white left-0 top-0 h-60px w-full fixed z-1000 flex justify-center" style="box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1)">
    <div class="w-1200px flex justify-between" style="min-width: 1200px">
      <nav class="flex items-center justify-start bg-white">
        <nuxt-link to="/" class="nav-logo">
          <img class="w-322px h-28px mr-40px" alt="字节牛, 寓盟管家，推房助手" src="/public/images/nav/byteox-icon.png" />
        </nuxt-link>
        <div class="h-60px leading-60px pr-28px cursor-pointer nav-item group">
          <div :class="{ 'active-menu': activeMenu === 1 }">
            <span class="mr-1 text-current">产品</span>
            <span class="nav-icon-pointer icon-font group-hover:(rotate-180 transform transition-transform duration-500)">&#xe65b;</span>
          </div>

          <div class="nav-drawer">
            <div class="nav-drawer-concent">
              <div class="flex w-full min-h-365px flex justify-center">
                <div class="flex justify-between w-1200px">
                  <div class="nav-select text-hex-111 text-size-14px leading-20px py-36px">
                    <div
                      v-for="(item, index) in PRODUCT_ITEM_MAP"
                      :key="item"
                      class="w-172px h-44px pl-15px mr-10px leading-42px rounded-8px font-bold"
                      :class="product === index + 1 ? 'bg-hex-F0F5FF text-hex-0A87F8' : ''"
                      @mousemove="selectProduct(index + 1)"
                    >
                      {{ item }}
                    </div>
                  </div>
                  <template v-if="product === 1">
                    <NavStyle1 :list="NAV_MAP_1" />
                    <div class="nav-item-divider nav-item-divider-large" />
                    <NavStyle2 :list="NAV_MAP_7" />
                  </template>
                  <template v-if="product === 2">
                    <NavRoomPush />
                  </template>
                  <template v-if="product === 3">
                    <div class="w-500px">
                      <NavStyle1 class="w-200px" :list="NAV_MAP_3" />
                    </div>
                    <nuxt-link to="https://zufang.byteox.com/homepage" target="_blank">
                      <img class="nav-show-img" src="public/images/nav/moe-rent.png" alt="盟友租房" />
                    </nuxt-link>
                  </template>
                  <template v-if="product === 4">
                    <div class="w-500px">
                      <NavStyle1 class="w-200px" :list="NAV_MAP_4" />
                    </div>
                    <nuxt-link to="/product/jdf">
                      <img class="nav-show-img" src="public/images/nav/polycell.png" alt="聚多房" />
                    </nuxt-link>
                  </template>
                  <template v-if="product === 5">
                    <div class="w-500px">
                      <NavStyle1 class="w-200px" :list="NAV_MAP_5" />
                    </div>
                    <nuxt-link to="/product/product">
                      <img class="nav-show-img" src="public/images/nav/alot.png" alt="智能门锁" />
                    </nuxt-link>
                  </template>
                  <template v-if="product === 6">
                    <div class="w-500px">
                      <NavStyle1 class="w-200px" :list="NAV_MAP_6" />
                    </div>
                    <nuxt-link to="/product/yxs">
                      <img class="nav-show-img" src="public/images/nav/school-club.png" alt="寓学社" />
                    </nuxt-link>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-60px leading-60px pr-28px cursor-pointer nav-item group">
          <div :class="{ 'active-menu': activeMenu === 2 }">
            <span class="mr-1 text-current">解决方案</span>
            <span class="nav-icon-pointer icon-font group-hover:(rotate-180 transform transition-transform duration-500)">&#xe65b;</span>
          </div>
          <div class="nav-drawer">
            <div class="nav-drawer-concent">
              <div class="flex justify-center">
                <div class="flex justify-between w-1200px">
                  <NavStyle3 :list="NAV_SOLUTION_MAP" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-60px leading-60px pr-28px cursor-pointer nav-item group">
          <div :class="{ 'active-menu': activeMenu === 3 }">
            <span class="mr-1 text-current">客户案例</span>
            <span class="nav-icon-pointer icon-font group-hover:(rotate-180 transform transition-transform duration-500)">&#xe65b;</span>
          </div>
          <div class="nav-drawer">
            <div class="nav-drawer-concent">
              <div class="flex justify-center">
                <div class="flex justify-between flex-col w-1200px">
                  <NavStyle4 :list="NAV_CUSTOMER_CASE_MAP" />
                  <nuxt-link to="/customer" class="mt-10px mb-50px">
                    <div class="text-font-12px font-bold text-hex-0A87F8 hover:(underline)">了解更多行业及客户案例>></div>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h-60px leading-60px pr-28px cursor-pointer nav-item group">
          <div :class="{ 'active-menu': activeMenu === 4 }">
            <span class="mr-1 text-current">资源与服务</span>
            <span class="nav-icon-pointer icon-font group-hover:(rotate-180 transform transition-transform duration-500)">&#xe65b;</span>
          </div>
          <div class="nav-drawer">
            <div class="nav-drawer-concent">
              <div class="flex justify-center">
                <div class="flex justify-between flex-col w-1200px">
                  <NavResources :list="NAV_RESOURCES_SERVICES_MAP" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <nuxt-link to="/about" class="pr-28px nav-item cursor-pointer">
          <span class="text-current" :class="{ 'active-menu': activeMenu === 5 }">关于我们</span>
        </nuxt-link>
      </nav>
      <div class="flex items-center justify-end">
        <img class="w-18px h-18px" src="/public/images/nav/phone.png" />
        <span class="text-14px pl-1">400-186-1216</span>
        <NuxtLink to="https://saas.byteox.com/#/login">
          <button class="full-btn w-96px h-36px rounded ml-20px border-none text-14px">免费试用</button>
        </NuxtLink>
      </div>
    </div>
  </header>
  <div class="flex flex-col justify-between items-center fixed top-500px right-40px bg-white w-54px h-200px rounded-27px z-100 py-20px" style="box-shadow: 0px 0px 20px 0px rgba(108, 108, 108, 0.2)">
    <NPopover trigger="hover" placement="left" style="right: 10px; border-radius: 8px; padding: 0 15px">
      <template #trigger>
        <div class="flex flex-col justify-center items-center cursor-pointer">
          <img class="w-24px h-24px" src="/public/images/icon/weixin.png" alt="微信" />
          <div class="text-hex-777 text-size-10px">微信咨询</div>
        </div>
      </template>
      <div>
        <div class="py-6px">
          <img class="w-120px h-120px" src="/public/images/nav/ymqr.png" alt="微信二维码" />
          <p class="text-hex-333 text-size-12px text-center">添加寓盟管家产品顾问</p>
        </div>
      </div>
    </NPopover>
    <NPopover trigger="hover" placement="left" style="right: 10px; border-radius: 8px">
      <template #trigger>
        <div class="flex flex-col justify-center items-center cursor-pointer">
          <img class="w-24px h-24px" src="/public/images/icon/phone.png" alt="电话联系" />
          <div class="text-hex-777 text-size-10px">电话联系</div>
        </div>
      </template>
      <div class="w-191px px-15px py-15px">
        <img class="w-137px h-16px" src="/public/images/nav/zxlx.png" alt="在线联系" />
        <p class="text-hex-777 text-size12px mt-13px">每日 9:00-21:00 在线</p>
      </div>
    </NPopover>
    <div class="flex flex-col justify-center items-center cursor-pointer" @click="loadBaiduScript">
      <img class="w-24px h-24px" src="/public/images/icon/kefu.png" alt="在线咨询" />
      <div class="text-hex-777 text-size-10px">在线咨询</div>
    </div>
  </div>

  <div
    v-show="showTop"
    class="flex flex-col items-center justify-center fixed top-720px right-40px bg-white w-54px h-54px z-100 top-box"
    style="box-shadow: 0px 0px 20px 0px rgba(108, 108, 108, 0.2); border-radius: 50%; cursor: pointer"
    @click="scrollTo"
  >
    <img class="w-24px h-24px" src="/public/images/home/top.png" />
    <div class="text-hex-777 text-size-10px">置顶</div>
  </div>

  <div class="h-60px"></div>
</template>

<style lang="scss" scoped>
@variants focus, hover, active {
  .nav-item {
    @apply text-hex-0A87F8;
  }
}

.nav-logo {
  height: 60px;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  z-index: 3;
}

// .nav-drawer {
//   position: absolute;
//   left: 0;
//   right: 0;
//   z-index: 2;
//   background: #fff;
//   box-shadow: 0px 10px 20px 0px rgba(0, 119, 255, 0.1);
// }

.nav-drawer {
  width: 100vw;
  position: absolute;
  z-index: -1;
  left: 0;
  top: -520px;
  background: #fff;
  transition: opacity 0.3s linear;
  opacity: 0;
  cursor: auto;
  box-shadow: 0px 5px 15px 0px rgba(0, 119, 255, 0.1) inset;
  @apply group-hover:(z-index-1 top-60px opacity-100 transition-opacity transform duration-300);
}

.nav-select {
  box-shadow: 12px 0px 20px 0px rgba(0, 119, 255, 0.1);
}

.nav-drawer-concent {
  box-shadow: 0px 5px 10px 0px rgba(0, 119, 255, 0.1);
}

.nav-icon-pointer {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  transition: 0.5s;
}
.nav-item-divider {
  width: 1px;
  height: 224px;
  margin-top: 48px;
  background: #e8e8e8;
}

.nav-item-divider-large {
  height: 434px;
}
.nav-show-img {
  width: 375px;
  margin: 20px 0 0 60px;
}
.top-box {
  transition: 0.6s !important;
}

.active-menu {
  color: #0a87f8;
}
</style>
